<script setup>
import { RouterLink, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { computed } from 'vue'
import IconUser from '@/components/icons/IconUser.vue'

const router = useRouter()
const authStore = useAuthStore()
const isLogin = computed(() => authStore.isAuthenticated)
const toLink = computed(() => {
  return isLogin.value ? { name: 'user' } : { name: 'auth' }
})

const userCommand = (command) => {
  switch (command) {
    case 'profile':
      router.push({ name: 'userInfo' })
      break
    case 'logout':
      authStore.clear()
      ElMessage.success('已登出')
      router.push({ name: 'authLogin' })
      break
  }
}
</script>

<template>
  <el-button style="width: 32px" v-if="!isLogin">
    <RouterLink :to="toLink">
      <IconUser />
    </RouterLink>
  </el-button>
  <el-dropdown v-else @command="userCommand">
    <el-button style="width: 32px">
      <IconUser />
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="profile">个人资料</el-dropdown-item>
        <el-dropdown-item command="logout">登出账号</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
